<div class="seach-head">
    <div class="zdy-seach-wrap">
        <div nz-space class="seach-content">
            <div *nzSpaceItem class="seach-item">
                <label class="seach-label">发生时间</label>
                <div class="seach-control">
                    <nz-range-picker
                        nzAllowClear
                        nzInputReadOnly
                        nzFormat="yyyy-MM-dd"
                        [(ngModel)]="dateArrs"
                        (ngModelChange)="dateChange($event)">
                    </nz-range-picker>
                </div>
            </div>
    
            <div *nzSpaceItem class="seach-item">
                <label class="seach-label">收支类型</label>
                <div class="seach-control">
                    <nz-select
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzShowSearch
                        nzAllowClear
                        nzPlaceHolder="全部"
                        [(ngModel)]="incomeExpendSelected">
                        <nz-option
                            *ngFor="let item of incomeExpenditureOptions"
                            [nzLabel]="item.name"
                            [nzValue]="item.content">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div *nzSpaceItem class="seach-item">
                <label class="seach-label">收益审核状态</label>
                <div class="seach-control">
                    <nz-select
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzShowSearch
                        nzAllowClear
                        nzPlaceHolder="全部"
                        [(ngModel)]="profitExamineSelected">
                        <nz-option
                            *ngFor="let item of profitExamineOptions"
                            [nzLabel]="item.label"
                            [nzValue]="item.id">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div *nzSpaceItem class="seach-item" [hidden]="!isCollapse">
                <label class="seach-label">收益到账状态</label>
                <div class="seach-control">
                    <nz-select
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzShowSearch
                        nzAllowClear
                        nzPlaceHolder="全部"
                        [(ngModel)]="profitArrivalSeleected">
                        <nz-option
                            *ngFor="let item of profitArrivalOptions"
                            [nzLabel]="item.label"
                            [nzValue]="item.id">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div *nzSpaceItem class="seach-item" [hidden]="!isCollapse">
                <label class="seach-label">综合搜索</label>
                <div class="seach-control">
                    <input nz-input placeholder="ID/关联单号/交易流水" [(ngModel)]="seachParams.num" />
                </div>
            </div>
    
            <div *nzSpaceItem class="seach-item">
                <button nz-button nzType="primary" class="m-r-8" (click)="queryData()">查询</button>
                <button nz-button nzType="default" (click)="resetData()">重置</button>
                <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
                    {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<main class="main-wrap pagination-wrap-position m-t-6">
    <!-- Table -->
    <div class="table-wrap">
        <nz-table
            #basicTable
            nzSize="small"
            nzShowSizeChanger
            nzShowQuickJumper
            nzOuterBordered
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzLoading]="tableParams.tableLoading"
            [nzData]="tableData"
            [nzPageSizeOptions]="[2, 5, 10, 20, 50, 100]"
            [nzTotal]="tableParams.total"
            [nzPageIndex]="tableParams.page"
            [nzPageSize]="tableParams.pageSize"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)"
        >
            <thead>
                <tr>
                    <th nzAlign="center" nzWidth="120px" nzLeft>ID</th>
                    <th nzAlign="center">收支类型</th>
                    <th nzAlign="center">发生时间</th>
                    <th nzAlign="center">爱豆明细</th>
                    <th nzAlign="center">关联单号</th>
                    <th nzAlign="center">交易流水</th>
                    <th nzAlign="center">收益审核状态</th>
                    <th nzAlign="center">收益到账状态</th>
                    <th nzAlign="center">收益到账时间</th>
                </tr>
            </thead>
  
            <tbody>
                <tr *ngFor="let data of basicTable.data">
                    <td nzAlign="center" nzLeft>{{ data.id }}</td>
                    <!-- 收支类型 -->
                    <td nzAlign="center">
                        {{ typeFilter(data.transactionType) }}
                    </td>
                    <!-- 发生时间 -->
                    <td nzAlign="center">{{ data.createTime || '-' }}</td>
                    <!-- 爱豆明细 -->
                    <td nzAlign="center">
                        <span class="happen-mon" [ngClass]="{'color-red': data.changeType == 2, 'color-green': data.changeType != 2}">
                            {{ data.changeType == 2 ? ('-' + (data.amount | number : '0.2-2')) : ('+' + (data.amount | number : '0.2-2')) }}
                        </span>
                    </td>
                    <!-- 关联单号 -->
                    <td nzAlign="center">{{ data.businessNo || '-' }}</td>
                    <!-- 交易流水 -->
                    <td nzAlign="center">{{ (data.billNo && data.billNo !== '0') ? data.billNo : '-' }}</td>
                    <!-- 收益审核状态 -->
                    <td nzAlign="center">
                        <ng-container *ngIf="[1, 2, 3, 25].includes(data.transactionType);else templateAudit">
                            <span [ngStyle]="{'color': data.auditStatus | profitExamineStatus: 'color'}">
                                {{ data.auditStatus | profitExamineStatus: 'text' }}
                            </span>
                        </ng-container>
                        <ng-template #templateAudit>-</ng-template>
                    </td>
                    <!-- 收益到账状态 -->
                    <td nzAlign="center">
                        <ng-container *ngIf="[1, 2, 3, 25, 27].includes(data.transactionType);else templateTransa">
                        <span [ngStyle]="{'color': data.status | profitArrivalStatus: 'color'}">
                            {{ data.status | profitArrivalStatus: 'text' }}
                        </span>
                        </ng-container>
                        <ng-template #templateTransa>-</ng-template>
                    </td>
                    <!-- 收益到账时间 -->
                    <td nzAlign="center">{{ data.accountTime || '-' }}</td>
                </tr>
            </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ tableParams.total }} 条</ng-template>
    </div>
  
    <!-- back -->
    <div class="foot-btns">
        <nz-divider></nz-divider>
        <app-bt-group [btType]="'default'" [btText]="'返回'"></app-bt-group>
    </div>
</main>